<template>
 <Layout>
		<view class="warrper">
		  <!-- 顶部金额 -->
		  <view class="total_amount">
		    <text class="amount">${{ $formatMoney(detailData.totalBonus) }}</text>
		    <text class="label">獎金總額</text>
         <button class="confirm_btn" :class="statClassMap[detailData.state]">{{ stateMap[detailData.state] }}</button>
		  </view>
	
    
      <!-- 留言反馈 -->
      <view class="feedback-section">
        <view class="label">添加留言</view>
        <textarea
          v-model="payload.content"
          class="textarea"
          placeholder="請在此填寫信息"
          maxlength="1000"
        ></textarea>
        <view class="word-count">{{ payload.content.length }} / 1000</view>

        <uni-file-picker file-mediatype="all" @delete="handleDelete" :auto-upload="false" @select="handleAttachment"  ref="uploadFileRef">
          <view class="attachment">
            +附加檔案
          </view>
        </uni-file-picker>
       

        <view class="btn-group">
          <button class="btn cancel-btn" @click="goBack">返回</button>
          <button class="btn submit-btn" @click="submit">提交異議</button>
        </view>
      </view>
    </view>
	</Layout>
</template>

<script>
import uniFilePicker from '@/uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue'
import { submitDispute, getMyBonus, uploadDissentFileApi } from '@/api/salesaman.js'

export default {
  name: '',
  components: {
    uniFilePicker
  },
  props: {
  },
  data() {
    return {
      routeQuery: {},
      detailData: {},
      stateMap: {
					0: '待審核',
					1: 'CEO已確認',
					10: '人資審核通過',
					11: '業務員確認',
					12: '主管確認',
					4: '有異議'
				},
				statClassMap: {
					0: 'status_pending', // #f9ba23 橘黃
					1: 'status_ceo', // #33cc33 綠色
					10: 'status_hr', // #66ccff 天藍
					11: 'status_sales', // #ff9900 深橙
					12: 'status_manager', // #9966cc 紫色
					4: 'status_danger' // #f92a23 紅色
				},
      payload: {
        content: '',
        id: undefined,
      },
      fileList: [],
    }
  },
  onLoad(options) {
    this.routeQuery = options;
    getMyBonus({dateStr: this.routeQuery.dateStr}).then(res => { 
      this.detailData = res.data.myBonus
      this.payload.id = res.data.myBonus.id *1
    })
  },
  methods: {
     uploadDissentFun(fileObj) {
      return new Promise((resolve, reject) => {
        // 模拟上传逻辑
        const filePath = fileObj.tempFilePath || fileObj.path || fileObj.url
        uploadDissentFileApi(filePath).then(res=>{
          // this.$refs.uploadFileRef.updateFile(fileObj, {
          //   status: 'success', // 或 'fail'
          //   progress: 100,
          // });
          const obj = {
            uuid: fileObj.uuid,
            hrefUrl: res.data,
          }
          resolve(obj)
        })
      });
    },
    handleAttachment(e) {
      const files = e.tempFiles || [];
      if (!files.length) return;
      uni.showLoading({ title: '上传中...', icon: 'loading' , mask: true});
       const uploadPromises = files.map(file => {
        return this.uploadDissentFun(file);
      });
      Promise.all(uploadPromises).then(res => { 
        this.fileList = res;
        uni.hideLoading();
      }).catch(err => {
        uni.hideLoading();
      });
    },
    goBack() {
      uni.redirectTo({ url: '/pages/salesman/myBonus/index?dateStr=' + this.routeQuery.dateStr })
    },
    handleDelete(e){
      const delFileUid = e.tempFile.uuid
      this.fileList = this.fileList.filter(file => file.uuid !== delFileUid)
    },
    submit() {
      if (!this.payload.content.trim()) {
        return uni.showToast({ title: '請填寫留言內容', icon: 'none' });
      }
      this.payload.urls = (this.fileList.map(file => file.hrefUrl) || []).join('')
      submitDispute(this.payload).then(res=>{ 
        uni.showToast({ title: res.message, icon: 'none' });
        this.payload.content = ''
        this.goBack()
      }).catch(err=>{
        console.log(err)
      })
    }
  },
  created() {
    
  },
}
</script>

<style lang='scss' scoped>
.warrper{
  padding: 30rpx;
  padding-bottom: 50px;
  padding-top: 30px;
  .total_amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14rpx;
    margin-bottom: 40rpx;
    .amount {
      font-size: 60rpx;
      font-weight: bold;
      color: #2e7d32;
    }
    .confirm_btn {
      width: 220rpx;
      margin-top: 20rpx;
      padding: 0rpx 30rpx;
      /* background-color: #b4b6b7; */
      color: #fff;
      border-radius: 10rpx;
      font-size: 26rpx;
    }
    /* .waiting_btn{
			background-color: #ff9800;
		}
		.success_btn{
			background-color: #2e7d32;
		}
		.disagree_btn{
			background-color: #f62121;
		} */
  }
  .feedback-section {
    margin-top: 40rpx;
    .label {
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    .textarea {
      width: 100%;
      height: 400rpx;
      padding: 20rpx;
      border: 1rpx solid #ccc;
      border-radius: 10rpx;
      font-size: 28rpx;
      box-sizing: border-box;
    }

    .word-count {
      text-align: right;
      font-size: 24rpx;
      color: #999;
      margin-top: 10rpx;
    }

    .attachment {
      margin: 30rpx 0;
      color: #ff6600;
      font-size: 28rpx;
    }

    .btn-group {
      margin-top: 40px;
      display: flex;
      justify-content: space-between;
      gap: 20rpx;

      .btn {
        width: 280rpx;
        padding: 2rpx 46rpx;
        border-radius: 10rpx;
        font-size: 28rpx;
        text-align: center;
      }

      .cancel-btn {
        background-color: #fff;
        border: 1rpx solid #ccc;
        color: #333;
      }

      .submit-btn {
        background-color: #03a9f4;
        color: #fff;
      }
    }
  }
}
::v-deep .file-picker__progress{
  display: none;
}
.status_pending {
	background-color: #f9ba23;
}
.status_ceo {
  background-color: #33cc33;
}
.status_hr {
  background-color: #3bb3ef;
}
.status_sales {
  background-color: #ff9900;
}
.status_manager {
  background-color: #9966cc;
}
.status_danger {
  background-color: #f92a23;
}
</style>